<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ msg }}  == {{sex}}    == {{ name }}  {{chengwei}}
        <div>{{girl}}</div>
        <button @click="goTo">冲冲</button>
    </div>
    <script src="./dist/vue.js"></script>
    <script>
       var vm =  new Vue({
            el:'#app',
            data(){
                return{
                    msg:'李哥',
                    name:'张三',
                    age:"18",
                    sex:'男',
                    girl:{
                        name:'even',
                        age:"18",
                        weight:'50kg'
                    }
                }
            },
            methods: {
                goTo(){
                    console.log('你好');
                }
            },
            computed:{
                chengwei(){
                    if(this.sex === '男'){
                        return  '先生'
                    }else{
                        return '女士'   
                    }
                }
            },
            watch:{
                sex(newVal,oldVal){
                    if(newVal!==oldVal){
                        console.log('性别是不可以被改变的');
                    }
                }
            }
        })
    </script>
    <script>
        const arr = new Array
        this.arr2 = new Array
    </script>
</body>
</html>